<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首都图书馆</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #A72821;
            color: #333;
            max-width: 768px;
            margin: 0 auto;
        }

        .header {
            background-color: #b71c1c;
            color: white;
            padding: 15px 15px;
            position: relative;
            text-align: center;
        }

        .header .back-btn {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-size: 20px;
        }

        .header .menu-btn {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-size: 20px;
        }

        .banner-img {
            width: 100%;
            height: auto;
        }

        .container {
            background-color: #A72821;
            padding: 0;
            max-width: 750px;
            opacity: 0;
        }

        .content {
            padding: .3rem;

        }

        .intro-box {
            background: url(./img/list_video_bj.png) no-repeat;
            background-size: 100% 100%;
            /* height: 4.3rem; */
            padding: .1rem .2rem .2rem;
            margin-bottom: .12rem;
            line-height: .46rem;
            margin-top: -3.4rem;
            position: relative;
            font-size: .28rem;
            z-index: 2;
            display: block;
            float: left;
        }

        .intro-video {
            width: 100%;
            height: 3.9rem;
            display: block;
            float: left;
        }

        .series-grid {
            display: flex;
            flex-wrap: wrap;
            margin: 0 0;
            background: #FFF2D7;
            border: 2px solid #FFAE3A;
            background-image: url(./img/list_txt_bj.png);
            background-repeat: no-repeat;
            background-size: 100% auto;
            background-position: top left;
            border-radius: .2rem;
            width: 100%;
            box-sizing: border-box;
            padding: .05rem .2rem;
        }



        .series-item {
            width: 50%;
            padding: 0 8px 18px;
        }

        .series-card {
            overflow: hidden;
            display: block;
            color: #333;
            text-decoration: none;
        }



        .series-img-container {
            position: relative;
            overflow: hidden;
            height: 1.77rem;
            /* width: 3.15rem; */
            box-shadow: 0px .04rem .12rem 0px rgba(129, 19, 13, 1);
            border-radius: .2rem;
        }

        .series-img {
            width: 100%;
            height: 1.77rem;
            /* object-fit: cover;
            transition: transform 0.5s ease; */
        }

        .series-card:hover .series-img {
            transform: scale(1.05);
        }

        .series-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: .4rem;
            font-family: OPlusSans30;
            font-size: .28rem;
            color: #FEDFC0;
            line-height: .4rem;
            font-style: normal;
            text-align: center;
            margin: .15rem 0 0;
        }

        .footer {
            text-align: center;
            padding: 15px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
            background-color: #a01a1a;
        }

        /* 加载更多按钮 */
        .load-more {
            text-align: center;
            padding: 15px 0 20px;
        }

        .load-more-btn {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .load-more-btn:hover {
            background-color: rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
        }

        .t_num {
            width: 100%;
            height: .8rem;
            float: left;
            overflow-x: auto;
            overflow-y: hidden;
            /* 允许水平滚动 */
            white-space: nowrap;
            /* 保持内容在同一行 */
            display: inline-block;
            /* 或使用 flex, grid 等布局 */
            white-space: nowrap;
            margin: .2rem 0 .25rem;
            /* 保持内容在同一行 */
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* Internet Explorer 10+ */
        }

        .t_num::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari, Opera*/
        }

        .t_num span {
            /* 固定子元素宽度，根据需求调整 */
            width: .8rem;
            /* 高度根据需求调整 */
            height: .8rem;
            line-height: .8rem;
            text-align: center;
            /* 边框等样式，根据需求添加 */
            border: 1px solid #D9A4A4;
            border-radius: .14rem;
            margin-right: .15rem;
            /* 子元素之间的间距 */
            font-size: .32rem;
            color: #000000;
            display: inline-block;
            background: #fff;
            font-weight: bold;
            cursor: pointer;
        }

        .t_num span.active {
            cursor: default;
            background: #FFEBEB;
            border-color: #CC4038;
            color: #CC4038;
        }

        .t_f {
            width: 100%;
            height: auto;
            float: left;
            font-size: .28rem;
            color: #000000;
            line-height: .5rem;
            text-align: justify;
            font-style: normal;
            margin: 0 0 .2rem;
        }

        .t_title {
            width: 100%;
            height: auto;
            float: left;
            font-size: .28rem;
            color: #000000;
            line-height: .4rem;
            text-align: justify;
            font-style: normal;
            margin: 0 0 0;
        }

        .t_name {
            width: 100%;
            height: auto;
            float: left;
            font-weight: bold;
            font-size: .34rem;
            color: #000000;
            line-height: .48rem;
            text-align: justify;
            font-style: normal;
            margin: .22rem 0 .25rem;
        }

        .t_name p {
            width: auto;
            height: auto;
            float: right;
            font-weight: 500;
            font-size: .24rem;
            color: #CC4038;
            line-height: .34rem;
            text-align: right;
            font-style: normal;
        }
    </style>
</head>

<body>
    <div class="container">


        <!-- 标题 banner -->

        <img src="./img/list_bj.png" alt="典藏北京" class="banner-img">


        <!-- 内容区域 -->
        <div class="content">
            <!-- 系列介绍 -->
            <div class="intro-box">
                <video src="https://www.w3school.com.cn/i/video/shanghai.mp4" class="intro-video" controls="controls"
                    autoplay="autoplay"></video>
            </div>

            <!-- 系列列表 -->
            <div class="series-t"></div>
            <div class="series-grid">
                <div class="t_name">
                    <span>旧京戏楼</span>
                    <p>浏览次数：14098</p>
                </div>
                <div class="t_title">标题</div>
                <div class="t_num">
                    <span class="active">1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                    <span>10</span>
                    <span>11</span>
                    <span>12</span>
                </div>
                <div class="t_f">
                    《旧京戏楼》系列共8集，介绍了北京地区历代戏楼会馆，从建设到开放，从兴旺到衰败的全部过程，包括平阳会馆戏楼，正乙祠戏楼，湖广会馆戏楼，安徽会馆戏楼，颐和园戏楼，恭王府戏楼，大栅栏戏院和天桥杂耍戏场。
                    目录： 01-旧京戏楼之颐和园戏楼 02-旧京戏楼之天桥杂耍戏场 03-旧京戏楼之平阳会馆戏楼 04-旧京戏楼之湖广会馆戏楼 05-旧京戏楼之恭王府戏楼 06-旧京戏楼之大栅栏戏园
                    07-旧京戏楼之正乙祠戏楼 08-旧京戏楼之安徽会馆戏楼</div>
            </div>
        </div>


    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        // 加载更多功能
        $(document).ready(function () {

            // 动态计算根元素字体大小（通常放在head中，优先加载）

            function setRemUnit() {
                // 设计稿宽度750px
                const designWidth = 750;
                // 1rem对应设计稿中的100px（可调整，如1rem=50px则除以50）
                const remBase = 100;
                // 获取屏幕宽度（兼容不同浏览器）
                const deviceWidth = document.documentElement.clientWidth || window.innerWidth;
                // 计算根元素font-size（屏幕宽度/设计稿宽度 * remBase）
                document.documentElement.style.fontSize = (deviceWidth / designWidth * remBase) > 100 ? 100 + 'px' : (deviceWidth / designWidth * remBase) + 'px';
                document.querySelector('.container').style.opacity = 1;
            }
            // 初始化执行
            setRemUnit();
            // 监听窗口 resize 事件，动态调整
            window.addEventListener('resize', setRemUnit);

            $(".t_num span").click(function () {
                $(this).addClass("active").siblings().removeClass("active");
                // 获取html内容
                var temp = $(this).html();
                if(temp==1){
                    $(".intro-video").attr("src", "https://www.w3school.com.cn/i/video/shanghai.mp4");
                }
                if(temp==2){
                    $(".intro-video").attr("src", "https://vdept3.bdstatic.com/mda-rfn4snga21jbjvvi/cae_h264/1750649031220140524/mda-rfn4snga21jbjvvi.mp4?v_from_s=hkapp-haokan-suzhou&auth_key=1760625307-0-0-d074da83d90da25049136b46b0516df8&bcevod_channel=searchbox_feed&pd=1&cr=0&cd=0&pt=3&logid=2107351070&vid=12784334187086455818&klogid=2107351070&abtest=");
                }
                if(temp==3){
                    $(".intro-video").attr("src", "https://vdept3.bdstatic.com/mda-rdjjd6wpumm67ytr/cae_h264/1745156534810928018/mda-rdjjd6wpumm67ytr.mp4?v_from_s=hkapp-haokan-suzhou&auth_key=1760625393-0-0-db9f4578d8c1142c930545b824d860f1&bcevod_channel=searchbox_feed&pd=1&cr=0&cd=0&pt=3&logid=2193017844&vid=11133523924361710274&klogid=2193017844&abtest=");
                }
            });
        });
    </script>
</body>

</html>